<template>
	<div class="login-form">
		<div class="type-tab">
			<span v-for="item in tabs" :key="item.id" @click="tab=item.id" :class="{active: tab==item.id}">{{item.text}}</span>
		</div>
		<div v-show="tab==1" class="input-box">
			<div class="item" v-for="item in pwdLogin" :key="item.name">
				<Input :input="item" :styles="item.errorType?item.styles:{}" @change="change" />
				<!-- 右侧图标 -->
				<span class="status" v-show="item.errorType"></span>
				<!-- 下面提示 -->
				<p class="tips" v-show="item.errorType">{{item.tips[item.errorType]}}</p>
			</div>
		</div>
		<div v-show="tab==2" class="input-box">
			<div class="item">
				<div class="box">
					<Select :list="country" :config="select" @change="change"/>
					<Input :input="phone" :styles="phone.styles" @change="change"/>
				</div>
				<span class="status" v-show="phone.errorType"></span>
				<p class="tips" v-show="phone.errorType">{{phone.tips[phone.errorType]}}</p>
			</div>
			<div class="item">
				<Node :phone="{phone: form.phone, reg: verifys.vphone}" @change="change" @error="sendError"/>
				<span class="status" v-show="node.errorType"></span>
				<p class="tips" v-show="node.errorType">{{node.tips[node.errorType]}}</p>
			</div>
		</div>
	</div>
</template>

<script>
import Node from '@/components/Input/Node'
import Select from '@/components/Input/Select'
export default{
	data(){
		return{
			tab: 1,
			// 登录方式切换控制
			tabs: [
				{
					id: 1,
					text: '密码登录'
				},{
					id: 2,
					text: '短信登录'
				},
			],
			// 密码登录配置
			pwdLogin: [
				{
					name: 'username',
					type: 'text',
					val: 'zhangsan6',
					placeholder: '你的手机号/邮箱',
					tips: {
						nothing: '喵，你没输入手机号么？',
						format: '手机号或邮箱格式错误',
						failing: ''
					},
					styles: {
						cs: {
							borderColor: '#f66495'
						}
					},
					errorType: ''
				},{
					name: 'password',
					type: 'password',
					val: '123123',
					placeholder: '密码',
					tips: {
						nothing: '喵，你没输入密码么？',
						format: '密码格式错误',
						failing: '用户名或密码错误'
					},
					styles: {
						cs: {
							borderColor: '#f66495'
						}
					},
					errorType: ''
				},
			],
			// 手机号输入框配置,和其它选项区别比较大
			phone:{
				name: 'phone',
				placeholder: '填写常用手机号',
				val: '',
				type: 'text',
				styles: {
					cs: {
						borderTopLeftRadius: '0px',
						borderBottomLeftRadius: '0px',
					},
					focus: {
						borderColor: '#00a1d6'
					}
				},
				tips: {
					nothing: '喵，你没有输入手机号么？',
					format: '手机号格式错误',
					failing: ''
				},
				errorType: ''
			},
			// 下拉列表配置
			select:{
				name: 'city',
				num: 9999,
				field: 'cname'
			},
			// 验证码框配置
			node:{
				name: 'node',
				placeholder: '输入接收的验证码',
				val: '',
				tips: {
					nothing: '喵，你没有输入验证码么？',
					format: '验证码格式错误',
					failing: '手机号或验证码有误'
				},
				errorType: ''
			},
			// 表单数据
			form: {
				select: '',
				username: 'zhangsan6',
				password: '123123',
				phone: '',
				node: ''
			},
			// 表单验证
			verifys: {
				vname: /^\w{3,12}$/,
				vpwd: /^\w{3,12}$/,
				vphone: /^1[34578]\d{9}$/,
				vnode: /^[\da-z]{4}$/
			}
		}
	},
	computed:{
		country(){
			let country = this.$store.state.other.country;
			return [].concat(country.common, [{id: 9999, country_id: 9999, cname: '--其它--'}], country.others);
		},
		user(){
			return this.$store.state.users.user;
		}
	},
	methods:{
		// 表单输入框有值改变就及时更新
		change(name, val){
			this.form[name] = val;
		},
		// 验证数据是否符合格式
		async verify(){
			let {username, password, phone, node, select} = this.form;
			let {vname, vpwd, vphone, vnode} = this.verifys; 
			if(this.tab == 1){
				if(username == ''){
					this.pwdLogin[0].errorType = 'nothing';
					this.pwdLogin[1].errorType = '';
				}else if(password == ''){
					this.pwdLogin[0].errorType = '';
					this.pwdLogin[1].errorType = 'nothing';
				}else if(!vname.test(username)&&!vphone.test(username)){
					this.pwdLogin[0].errorType = 'format';
					this.pwdLogin[1].errorType = '';
				}else if(!vpwd.test(password)){
					this.pwdLogin[0].errorType = '';
					this.pwdLogin[1].errorType = 'format';
				}else{
					// 发送请求验证用户名密码
					let userInfo = {
						url: '/api/user/login',
						query: {loginId : username, loginPwd : password}
					}
					await this.$store.dispatch('users/login', userInfo);
					if(this.user){
						this.pwdLogin[0].errorType = '';
						this.pwdLogin[1].errorType = '';
						console.log('登录成功');
						this.$router.push('/channel');
					}else{
						this.pwdLogin[1].errorType = 'failing';
					}
				}
			}else{
				
			}
		},
		// 验证码尝试发送的反馈
		sendError(errorType){
			this.phone.errorType = errorType;
		},
		// 父级调用，先验证是否通过
		submit(){
			this.verify();
		},
		// 获取地区数据
		getCountry(){
			let params = {
				where: 'other/getCountry', 
				url: '/web/generic/country/list'
			}
			this.$store.dispatch('global/request', params);
		}
	},
	components:{
		Node,
		Select
	},
	mounted(){
		this.getCountry();
	}
}
</script>

<style scoped lang="less">
.login-form{
	.type-tab{
		display: flex;
		align-items: center;
		margin-bottom: 12px;
		span{
			margin-right: 20px;
			font-size: 14px;
			color: #555;
			cursor: pointer;
			&.active{
				color: #02a7de;
			}
		}
	}
	.input-box{
		width: 100%;
		.item{
			position: relative;
			height: 72px;
			.status{
				display: block;
				position: absolute;
				top: 8px;
				right: -25px;
				width: 20px;
				height: 20px;
				background: url(../../assets/image/xuebi.png);
				background-position: -37px -38px;
			}
			.tips{
				margin: 6px 0;
				min-height: 20px;
				line-height: 20px;
				font-size: 12px;
				color: #f66495;
			}
		}
		.box{
			display: flex;
		}
	}
}
</style>
